<template>
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="instructions">
      <div class="ordinance">
        <p v-for="(item, index) in list" :key="index">
          {{ item }}
        </p>
      </div>
      <div class="whether_block">
        <span>线下是否有就诊卡</span>
        <label
          ><input type="radio" value="是" v-model="whether" />&nbsp;是</label
        >
        <label
          ><input type="radio" value="否" v-model="whether" />&nbsp;否</label
        >
      </div>
      <div class="agreement">
        <input type="checkbox" v-model="checked" />
        <label>我已阅读并同意<span>《手机建档说明书》</span></label>
      </div>
    </div>
    <div class="footer">
      <button @click="btnAction()">下一步</button>
    </div>
  </div>
</template>

<script>
import navbar from "../../../components/navbar.vue";
import { Toast } from "vant";
export default {
  components: {
    navbar,
  },
  data() {
    return {
      list: [
        "1、用户必须承诺输入的就诊人信息真实有效，遵守医院的实名就诊制度。",
        "2、在就诊当天，就诊人务必持本人身份证在医院自助机进行审核和补录就诊信息、并同时补办就诊卡，方可就诊，否则，医保患者将无法换取医保号；自费患者有报到科室将无法报道；无报到科室医生将无法接诊",
        "3、同一个注册账户只能保留1个手机建档未到医院补卡的就诊人。即，不可同时创建两个在线建档未补卡的就诊人",
        "4、手机建档未补卡患者只能预约1个号，当患者补办就诊卡后便可适用当前APP预约规则",
      ],
      whether: "是",
      checked: false,
    };
  },
  methods: {
    btnAction() {
      if (this.checked) {
        if (this.whether == "是") {
          this.$router.push({name: "ExistingMedicalCard",params: { text: "输入信息" },});
        } else if (this.whether == "否") {
          this.$router.push({name: "NoMedicalCard",params: { text: "填写信息" },});
        } else {
          Toast("请先选择是否有就诊卡");
        }
      } else {
        Toast("请先勾选手机建档");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}
.instructions {
  height: calc(100% - vw(45) - vw(60));
  position: relative;
  top: vw(46);
  left: 0;
  right: 0;
  bottom: vw(60);
  z-index: 1;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .ordinance {
    background-color: #fff;
    padding: vw(20);
    font-family: "MicrosoftYaHei", "微软雅黑";
    font-weight: 400;
    font-style: normal;
    line-height: vw(28);
    font-size: vw(13);
    color: #333333;
  }

  //是否有就诊卡
  .whether_block {
    height: vw(49);
    width: 100%;
    margin-top: vw(15);
    padding-left: vw(20);
    box-sizing: border-box;
    background-color: #fff;
    line-height: vw(49);
    font-family: "ArialMT", "Arial";
    font-weight: 400;
    font-style: normal;
    font-size: vw(14);
    span {
      padding-right: vw(30);
    }
    input {
      padding-right: vw(10);
    }
    label {
      color: #999999;
      padding-right: vw(10);
      padding-left: vw(5);
    }
  }

  //阅读并同意
  .agreement {
    // position: absolute;
    // bottom: vw(30);
    // left: vw(20);
    margin-top: vw(60);
    margin-left: vw(20);
    margin-bottom: vw(30);
    font-family: MicrosoftYaHei, 微软雅黑;
    font-weight: 400;
    font-style: normal;
    font-size: vw(14);
    color: #333333;
    label {
      color: #1e1e1e;
      margin-right: vw(2);
      span {
        color: #2ec7c9;
        font-size: vw(12);
      }
    }
  }
}

// 页脚
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: vw(56);
  z-index: 1;
  background-color: #fff;
  text-align: center;
  button {
    margin-top: vw(7);
    background-color: #2ec7c9;
    color: #fff;
    height: vw(44);
    width: vw(303);
    border: none;
    border-radius: vw(3);
    font-family: "MicrosoftYaHei", "微软雅黑 Regular", "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: vw(16);
  }
}
</style>
